<template>
	<view class="page-apply-wrapper">
		<custom-nav title="申请入会"></custom-nav>
		<view class="apply-header">
			<image class="header-bg" src="../../static/img/apply/bg.png"></image>
			<view class="apply-head_info">
				<view class="flow-item flex-act" @click="stap=1">
					<view class="flow-step">
						<up-icon v-if="stap==1" name="checkmark-circle-fill" color="#FF9839" size="26"></up-icon>
					</view>
					<text>入會須知</text>
				</view>
				<view class="flow-line"></view>
				<view class="flow-item" @click="stap=2">
					<view class="flow-step">
						<up-icon v-if="stap==2" name="checkmark-circle-fill" color="#FF9839" size="26"></up-icon>
					</view>
					<text>申請人資料</text>
				</view>
				<view class="flow-line"></view>
				<view class="flow-item" @click="stap=3">
					<view class="flow-step">
						<up-icon v-if="stap==3" name="checkmark-circle-fill" color="#FF9839" size="26"></up-icon>
					</view>
					<text>公司資料</text>
				</view>
				<view class="flow-line"></view>
				<view class="flow-item" @click="stap=4">
					<view class="flow-step">
						<up-icon v-if="stap==4" name="checkmark-circle-fill" color="#FF9839" size="26"></up-icon>
					</view>
					<text>推薦人資料</text>
				</view>
			</view>
		</view>
		<view class="apply-content" v-if="stap==1">
			<view>1、任何依照香港的商業登記條例登記之公司及個人均有資格加入香港中小企業工商聯合會。</view>
			<view>2、全體曾員均可享用香港中小企業工商聯合會提供的各種服務。</view>
			<view>3、凡其利益和目標與香港中小企業工商聯合會相同的團體機構,均有資格加入香港中小企業工商聯合會為會員。</view>
			<view>4、請填妥本表格、連同有效的商業登記副本及支付會員費之劃線文票(文票請以「香港中小企業工商聯合會有限公司」抬頭),寄往香港九龍尖沙咀束部加連威老道 94 號明輝中心十二楼1210
				室香港中小企業工商聯合會秘書處收。
			</view>
			<view>5、如有任何查詢，請致電(852)2330 0822 與香港中小企業工商聯合会秘書處聯絡。</view>
			<view>1、Any company or individual registered in accordance with the Business Registration Ordinance of Hong
				Kong is eligible to join the Hong Kong Federation of Small and Medium Enterprises and Industry.</view>
			<view>2、All members are entitled to enjoy the various services provided by the Hong Kong Federation of Small
				and Medium Enterprises and Industry.</view>
			<view>3、Any organization or institution whose interests and objectives are in line with those of the Hong
				Kong Federation of Small and Medium Enterprises and Industry is eligible to join as a member.</view>
			<view>4、Please complete this form, attach a copy of the valid business registration certificate, and send a
				crossed cheque (payable to "Hong Kong Federation of Small and Medium Enterprises and Industry Limited")
				to the Secretariat of the Hong Kong Federation of Small and Medium Enterprises and Industry, 12/F, Ming
				Hui Centre, 94 Jervois Street, Tsim Sha Tsui East, Kowloon, Hong Kong.
			</view>
			<view>5、For any inquiries, please contact the Secretariat of the Hong Kong Federation of Small and Medium
				Enterprises and Industry at (852) 2330 0822.
			</view>
		</view>
		<up-form labelPosition="left" :model="model" :rules="rules" ref="form1">
			<view class="apply-content apply-content2" v-if="stap==2">
				<view class="apply-form-wrapper">
					<view class="apply-form">
						<view class="serve-item-header">
							<text class="head-b"></text>
							<text class="item-tit">選擇會員類別</text>
						</view>
						<up-radio-group @change="typeChange" v-model="model.chamber_type_id" iconPlacement="right">
							<up-radio  v-for="item in chamberLists" :key="item.id" activeColor="#FF7139" :customStyle="{width: '100%', marginBottom: '22rpx'}" :name="item.id" :label="item.name"></up-radio>
						</up-radio-group>
					</view>
					<view class="apply-form apply-form-step2" style="margin-top: 0px;">
						<!-- <image class="form-must" src="../../static/img/apply/must.png"></image> -->
						<up-form-item required label="姓名（中文）:" prop="name" ref="item1" labelWidth="auto">
							<up-input v-model="model.name" inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<!-- <image class="form-must" src="../../static/img/apply/must.png"></image> -->
						<up-form-item required label="性别 :" prop="sex" ref="item1" labelWidth="auto">
							<view class="flex-r">
								<up-radio-group v-model="model.sex" placement="row">
									<!-- 1男   2女 -->
									<up-radio :customStyle="{marginLeft: '4px'}" activeColor="#FF7139" name="1"
										label="男">
									</up-radio>
									<up-radio :customStyle="{marginLeft: '4px'}" activeColor="#FF7139" name="2"
										label="女">
									</up-radio>
								</up-radio-group>
							</view>
						</up-form-item>
						<!-- <image class="form-must" src="../../static/img/apply/must.png"></image> -->
						<up-form-item required label="Name[English]：" prop="name_en" ref="item1" labelWidth="auto">
							<up-input v-model="model.name_en" inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<!-- <image class="form-must" src="../../static/img/apply/must.png"></image> -->
						<up-form-item required label="身份證號碼：" prop="idCard_no" ref="item1" labelWidth="auto">
							<up-input v-model="model.idCard_no" type="idcard" inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<up-form-item required label="聯絡地址（中文）：" prop="address" ref="item1" labelWidth="auto">
							<up-input v-model="model.address" inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<up-form-item required label="Corr. Address (English)：" prop="address_en" ref="item1"
							labelWidth="auto">
							<up-input v-model="model.address_en" inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<up-form-item required label="電話：" prop="mobile" ref="item1" labelWidth="auto">
							<up-input v-model="model.mobile" type="number" inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<up-form-item required label="傳真：" prop="fax" ref="item1" labelWidth="auto">
							<up-input v-model="model.fax" inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<up-form-item required label="電子郵箱：" prop="email" ref="item1" labelWidth="auto">
							<up-input v-model="model.email" inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<up-form-item @click="show1=true" required label="學歷：" prop="education_id" ref="item1" labelWidth="auto">
							<up-input v-model="model.education_name" readonly inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<up-form-item required label="工作年數：" prop="work_years" ref="item1" labelWidth="auto">
							<up-input v-model="model.work_years" type="number" inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<up-form-item required label="功能界别：" prop="function_con" ref="item1" labelWidth="auto">
							<up-input v-model="model.function_con" inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
<!-- 						<up-form-item required label="专业资格：" prop="speciality" ref="item1" labelWidth="auto">
							<up-input v-model="model.speciality" inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<up-form-item required label="社会服务经验：" prop="social" ref="item1" labelWidth="auto">
							<up-input v-model="model.social" inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item> -->

						<view class="serve-item-header">
							<text class="head-b"></text>
							<text class="item-tit">專業資格</text>
						</view>
						<textarea class="textarea" v-model="model.speciality" placeholder="請輸入内容"></textarea>
						<view class="serve-item-header">
							<text class="head-b"></text>
							<text class="item-tit">社會服務經驗</text>
						</view>
						<textarea class="textarea" v-model="model.social" placeholder="請輸入内容"></textarea>

					</view>

				</view>
			</view>
			<view class="apply-content apply-content3" v-if="stap==3">
				<view class="apply-form-wrapper">
					<view class="apply-form apply-form-step2">
						<up-form-item required label="機構名稱（中文）:" prop="institution_name" ref="item1" labelWidth="auto">
							<up-input v-model="model.institution_name" inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<up-form-item required label="商業登記證號碼 :" prop="business_reg_no" ref="item1" labelWidth="auto">
							<up-input v-model="model.business_reg_no" inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<!-- <image class="form-must" src="../../static/img/apply/must.png"></image> -->
						<up-form-item @click="show=true" required label="成立日期：" prop="business_createtime" ref="item1" labelWidth="auto">
						<!-- <picker mode="date"  class="s-flex-r-e-c w100 h48" :value="model.business_createtime" @change="bindTimeChange">
							<view class="uni-input">{{model.business_createtime}}</view>
						</picker> -->
						<up-input v-model="model.business_createtime" readonly inputAlign="right" border="none" placeholder="請輸入"
							style="text-align: right;"></up-input>
						<template #right>
							<up-icon name="arrow-right"></up-icon>
						</template>
						</up-form-item>
						<!-- <image class="form-must" src="../../static/img/apply/must.png"></image> -->
						<up-form-item required label="職位（中文）：" prop="position" ref="item1" labelWidth="auto">
							<up-input v-model="model.position" inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<up-form-item required label="職位（英文）：" prop="position_en" ref="item1" labelWidth="auto">
							<up-input v-model="model.position_en" inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<up-form-item required label="聯絡地址：" prop="business_address" ref="item1" labelWidth="auto">
							<up-input v-model="model.business_address" inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<up-form-item required label="corr.address(english)：" prop="business_address_en" ref="item1" labelWidth="auto">
							<up-input v-model="model.business_address_en" inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<up-form-item required label="電話：" type="number" prop="business_mobile" ref="item1" labelWidth="auto">
							<up-input v-model="model.business_mobile" inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<up-form-item required label="傳真：" prop="business_fax" ref="item1" labelWidth="auto">
							<up-input v-model="model.business_fax" inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<up-form-item required label="電子郵箱：" prop="business_email" ref="item1" labelWidth="auto">
							<up-input v-model="model.business_email" inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<up-form-item required label="網址：" prop="business_http" ref="item1" labelWidth="auto">
							<up-input v-model="model.business_http" inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<up-form-item required label="facebook：" prop="business_facebook" ref="item1" labelWidth="auto">
							<up-input v-model="model.business_facebook" inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<up-form-item @click="show2=true"  required label="公司形式：" prop="business_type_name" ref="item1" labelWidth="auto">
							<up-input v-model="model.business_type_name" readonly inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<up-form-item required label="產品/服務：" prop="business_service" ref="item1" labelWidth="auto">
							<up-input v-model="model.business_service" inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<up-form-item required label="公司本地人數：" prop="business_local_peo_num" ref="item1" labelWidth="auto">
							<up-input v-model="model.business_local_peo_num" type="number" inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<up-form-item required label="公司國內/海外人數：" prop="business_overseas_peo_num" ref="item1" labelWidth="auto">
							<up-input v-model="model.business_overseas_peo_num" type="number" inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
					</view>
				</view>
			</view>
			<view class="apply-content apply-content4" v-if="stap==4">
				<view class="apply-form-wrapper">
					<view class="apply-form apply-form-step2">

						<!-- <image class="form-must" src="../../static/img/apply/must.png"></image> -->
						<up-form-item required label="姓名（中文）:" prop="parent_name" ref="item1" labelWidth="auto">
							<up-input v-model="model.parent_name" inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<!-- <image class="form-must" src="../../static/img/apply/must.png"></image> -->
						<up-form-item required label="Name[English]: :" prop="parent_name_en" ref="item1" labelWidth="auto">
							<up-input v-model="model.parent_name_en" inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<!-- <image class="form-must" src="../../static/img/apply/must.png"></image> -->
						<up-form-item required label="會員編號：" prop="parent_no" ref="item1" labelWidth="auto">
							<up-input v-model="model.parent_no" inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<!-- <image class="form-must" src="../../static/img/apply/must.png"></image> -->
						<up-form-item required label="本會職位：" prop="parent_chamber_name" ref="item1" labelWidth="auto">
							<up-input v-model="model.parent_chamber_name" inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>

						<up-form-item required label="電話：" prop="parent_mobile" ref="item1" labelWidth="auto">
							<up-input v-model="model.parent_mobile" type="number" inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<up-form-item required label="傳真：" prop="parent_fax" ref="item1" labelWidth="auto">
							<up-input v-model="model.parent_fax" inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
						<up-form-item required label="電子郵箱：" prop="parent_email" ref="item1" labelWidth="auto">
							<up-input v-model="model.parent_email" inputAlign="right" border="none" placeholder="請輸入"
								style="text-align: right;"></up-input>
							<template #right>
								<up-icon name="arrow-right"></up-icon>
							</template>
						</up-form-item>
					</view>
				</view>

			</view>
		</up-form>
		<view class="apply-btn-wrapper" v-if="stap==1">
			<view class="apply-btn1" @click="handleNext">
				<text>下一步</text>
			</view>
		</view>
		<view class="apply-btn-wrapper" v-else-if="stap==4">
			<view class="apply-btn apply-btn-pre" @click="handlePre">
				<text>上一步</text>
			</view>
			<view class="apply-btn apply-btn-next" @click="handleSave">
				<text>保存</text>
			</view>

		</view>
		<view class="apply-btn-wrapper" v-else>
			<view class="apply-btn apply-btn-pre" @click="handlePre">
				<text>上一步</text>
			</view>
			<view class="apply-btn apply-btn-next" @click="handleNext">
				<text>下一步</text>
			</view>

		</view>
		<up-datetime-picker
		            :show="show"
					:minDate="187524800000"
					:maxDate="5086778555000"
		            v-model="business_createtime"
					@confirm="timeConfirm"
		             mode="date"
		        ></up-datetime-picker>
		<up-picker :show="show1" title="學歷" keyName="name" :columns="educationLists" @confirm="handleConfirm1"
			@cancel="()=>{show1=false}"></up-picker>
		<up-picker :show="show2" title="公司形式" keyName="name" :columns="businessTypeLists" @confirm="handleConfirm2"
			@cancel="()=>{show2=false}"></up-picker>

	</view>
</template>

<script setup>
	import { timeFormat } from '@/uni_modules/uview-plus';
	import customNav from '../../components/custom-nav.vue'
	import {
		ref,
		getCurrentInstance
	} from "vue";
	const {
		proxy
	} = getCurrentInstance();
	const stap = ref(1);
	const business_createtime = ref('');
	const show = ref(false);
	const show1 = ref(false);
	const show2 = ref(false);
	const uFormRef = ref(null);
	const model = ref({business_createtime:''});
	const rules = ref({});
	const chamberLists = ref([]); // 申请会员类别列表
	const educationLists = ref([]); // 学历
	const businessTypeLists = ref([]); // 公司形式
	function timeConfirm(e) {
		model.value.business_createtime = timeFormat(e.value, 'yyyy-mm-dd');
		show.value=false
	}
	function handlePre() {
		stap.value--;
	}
	
	function handleNext() {
		stap.value++;
	}
	 function bindTimeChange (e) {
	            model.value.business_createtime = e.detail.value
	        }
	function typeChange(e) {
		model.value.chamber_type_name=chamberLists.value.find(i=>i.id==e).name
	}
	// 会员类别
	function getChamberLists() {
	  proxy
	    .$request({
	      url: "api/Society/getChamberLists",
	      header: "application/x-www-form-urlencoded",
	      data: {},
	    })
	    .then((res) => {
	      if (res.code == 0) {
	        return proxy.$toast(res.msg);
	      } else {
	        chamberLists.value = res.data
	      }
	    });
	}
	getChamberLists();
	// 获取学历
	function getEducationLists() {
	  proxy
	    .$request({
	      url: "api/Society/getEducationLists",
	      header: "application/x-www-form-urlencoded",
	      data: {},
	    })
	    .then((res) => {
	      if (res.code == 0) {
	        return proxy.$toast(res.msg);
	      } else {
	        educationLists.value = [res.data]
	      }
	    });
	}
	getEducationLists();
	// 获取公司形式
	function getBusinessTypeLists() {
	  proxy
	    .$request({
	      url: "api/Society/getBusinessTypeLists",
	      header: "application/x-www-form-urlencoded",
	      data: {},
	    })
	    .then((res) => {
	      if (res.code == 0) {
	        return proxy.$toast(res.msg);
	      } else {
	        businessTypeLists.value = [res.data]
	      }
	    });
	}
	// 申请入会
	function handleSave() {
	  proxy
	    .$request({
	      url: "api/Society/applySociety",
	      header: "application/x-www-form-urlencoded",
	      data: model.value,
	    })
	    .then((res) => {
	      if (res.code == 0) {
			  setTimeout(()=>{
				  uni.navigateBack()
			  },3000)
	        proxy.$toast(res.msg);
	      } else {
	        proxy.$toast(res.msg);
			setTimeout(()=>{
							  uni.navigateBack()
			},3000)
	      }
	    });
	}
	// 查看我的入会信息
	function getMySocietyDetail() {
	  proxy
	    .$request({
	      url: "api/Society/getMySocietyDetail",
	      header: "application/x-www-form-urlencoded",
	      data: model.value,
	    })
	    .then((res) => {
	      if (res.code == 0) {
	        return proxy.$toast(res.msg);
	      } else {
	        
	      }
	    });
	}
	getBusinessTypeLists();
	function handleConfirm1(e) {
		model.value.education_id = e.value[0].id
		model.value.education_name = e.value[0].name
		show1.value = false
		// uFormRef.value.validateField('education_name');  
	}
	function handleConfirm2(e) {
		model.value.business_type_id = e.value[0].id
		model.value.business_type_name = e.value[0].name
		show2.value = false
		// uFormRef.value.validateField('business_type_name');  
	}
</script>

<style lang="scss" scoped>
	.flex-r{
	width: 100%;
	display: flex;
	
	::v-deep .u-radio-row{
		justify-content: flex-end !important;
	}
	::v-deep .u-radio-group{
		justify-content: flex-end !important;
	}
	}
	.page-apply-wrapper {
		.apply-header {
			position: relative;

			.header-bg {
				width: 100%;
				height: 482rpx;
			}

			.apply-head_info {
				position: absolute;
				display: flex;
				top: 200rpx;
				justify-content: center;
				width: 100%;
				align-items: center;

				.flow-line {
					height: 2rpx;
					width: 120rpx;
					// background: #fff;
					border-top: 2rpx dashed #fff;
				}

				.flex-act {
					text {
						color: #333 !important;
					}
				}

				.flow-item {

					// position: relative;



					.flow-step {
						background: #FFFFFF;
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
					}

					text {
						position: absolute;
						margin-left: -30rpx;
						margin-top: 10rpx;
						font-size: 25rpx;
						color: #666;
					}
				}
			}
		}

		.apply-content {
			background: #fff;
			position: relative;
			padding: 32rpx;
			padding-bottom: 100rpx;
			top: -130rpx;
			border-radius: 20rpx;

			view {
				color: #333333;
				font-size: 28rpx;
				line-height: 36rpx;
			}
		}

		.apply-content2 {
			position: relative;
			top: -130rpx;

			.apply-form {
				background: #fff;
				border-radius: 20rpx;
			}

			.apply-form-step1 {
				margin: 10rpx;
			}

			.apply-form-step2 {
				margin-top: 30rpx;
				padding-bottom: 90rpx;
			}

			.serve-item-header {
				margin-bottom: 20rpx;

				.head-b {
					display: inline-block;
					width: 12rpx;
					height: 24rpx;
					background: #FF7139;

				}

				.item-tit {
					color: #333333;
					font-weight: bold;
					font-size: 32rpx;
					margin-left: 16rpx;
				}

			}
		}

		.apply-content3 {
			position: relative;
			top: -130rpx;

			.apply-form {
				background: #fff;
				border-radius: 20rpx;
			}

			.apply-form-step1 {
				margin: 10rpx;
			}

			.apply-form-step2 {
				margin-top: 30rpx;
				padding-bottom: 90rpx;
			}

			.serve-item-header {
				margin-bottom: 20rpx;

				.head-b {
					display: inline-block;
					width: 12rpx;
					height: 24rpx;
					background: #FF7139;

				}

				.item-tit {
					color: #333333;
					font-weight: bold;
					font-size: 32rpx;
					margin-left: 16rpx;
				}

			}
		}

		.apply-content4 {
			position: relative;
			top: -130rpx;

			.apply-form {
				background: #fff;
				border-radius: 20rpx;
			}

			.apply-form-step1 {
				margin: 10rpx;
			}

			.apply-form-step2 {
				margin-top: 30rpx;
				padding-bottom: 90rpx;
			}

			.serve-item-header {
				margin-bottom: 20rpx;

				.head-b {
					display: inline-block;
					width: 12rpx;
					height: 24rpx;
					background: #FF7139;

				}

				.item-tit {
					color: #333333;
					font-weight: bold;
					font-size: 32rpx;
					margin-left: 16rpx;
				}

			}
		}

		.apply-btn-wrapper {
			position: fixed;
			bottom: 0;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 200rpx;
			z-index: 10;

			.apply-btn-pre {
				width: 215rpx;
				color: #FF7139;
				border: 2rpx solid #FF7139;
			}

			.apply-btn-next {
				width: 456rpx;
				background: linear-gradient(128deg, #FF9839 0%, #FF7139 100%);
				color: #fff;
			}

			.apply-btn {
				margin: 0 auto;
				height: 96rpx;

				border-radius: 200rpx;

				text-align: center;
				font-size: 32rpx;

				line-height: 96rpx;
			}

			.apply-btn1 {
				margin: 0 auto;
				height: 96rpx;
				background: linear-gradient(128deg, #FF9839 0%, #FF7139 100%);
				border-radius: 200rpx;
				width: 686rpx;
				text-align: center;
				font-size: 32rpx;
				color: #fff;
				line-height: 96rpx;
			}

			// background: rgba(0,0,0,);
		}




	}
	.textarea{
		border: 2rpx solid #EFEFEF;
		width: 100%;
		border-radius: 8rpx;
		margin-bottom: 22rpx;
		padding: 24rpx;
		box-sizing: border-box;
	}
</style>